<template>
	<view class="">
		<view class="wdxsyj">
			<view class="wdtopboxs">
				<view class="wdleftbox">
					<view class="lanboxs"></view>
					<view class="wdtxtbox">
						网点销售业绩
					</view>
				</view>
				<!-- 需要判断 是否在阶段范围内 -->
				<view class="timeboxs" >
					本阶段结束倒计时: <text>{{dataList['本阶段剩余天数']|| 0}}</text> 天
				</view>
			</view>
			<view class="yjboxs">
				<view class="yjleftboxs">
					<image class="tubiao" src="/static/homeNav/kehu.png" mode=""></image>
					<view class="yyxs">
						已营销客户数
					</view>
					<view class="yxssty">
						<text>{{dataList['部门成交客户']|| 0}}</text>人
					</view>
					<view class="fgkhs">
						分管客户数
					</view>
					<view class="fgnum">
						{{dataList['部门总客户']|| 0}}人
					</view>
				</view>
				<view class="yjrightbox">
					<view class="yewubox">
						<image src="/static/homeNav/cunkuan.png" mode=""></image>
						<view class="leiname">
							存款
						</view>
						<view class="numbox">
							{{dataList['部门存款']|| 0}}万元
						</view>
					</view>
					<view class="yewubox">
						<image src="/static/homeNav/daikaun.png" mode=""></image>
						<view class="leiname">
							贷款
						</view>
						<view class="numbox">
							{{dataList['部门贷款']|| 0}}万元
						</view>
					</view>
					<view class="yewubox">
						<image src="/static/homeNav/baoxian.png" mode=""></image>
						<view class="leiname">
							保险
						</view>
						<view class="numbox">
							{{dataList['部门保险']|| 0}}万元
						</view>
					</view>
					<view class="yewubox">
						<image src="/static/homeNav/guijinshu.png" mode=""></image>
						<view class="leiname">
							贵金属
						</view>
						<view class="numbox">
							{{dataList['部门贵金属']|| 0}}万元
						</view>
					</view>
					<view class="yewubox">
						<image src="/static/homeNav/shoudan.png" mode=""></image>
						<view class="leiname">
							收单
						</view>
						<view class="numbox">
							{{dataList['部门收单']|| 0}}万元
						</view>
					</view>

				</view>
			</view>
			<!-- 进度条 -->
			<view class="d-flex a-item-c p-l-r-20 p-b-50">
				<view class="">
					网点客户营销情况：
				</view>
				<u-line-progress :percentage="dataList['部门总进度']|| 0" height="18" activeColor="#ff0000"></u-line-progress>
			</view>
		</view>


		<view class="wdxsyj">
			<view class="wdtopboxs">
				<view class="wdleftbox">
					<view class="lanboxs"></view>
					<view class="wdtxtbox">
						我的销售业绩
					</view>
				</view>
			</view>
			<view class="yjboxs">
				<view class="yjleftboxs">
					<image class="tubiao" src="/static/homeNav/kehu.png" mode=""></image>
					<view class="yyxs">
						已营销客户数
					</view>
					<view class="yxssty">
						<text>{{dataList['个人成交客户']|| 0}}</text>人
					</view>
					<view class="fgkhs">
						分管客户数
					</view>
					<view class="fgnum">
						{{dataList['个人总客户']|| 0}}人
					</view>
				</view>
				<view class="yjrightbox">
					<view class="yewubox">
						<image src="/static/homeNav/cunkuan.png" mode=""></image>
						<view class="leiname">
							存款
						</view>
						<view class="numbox">
							{{dataList['个人存款']|| 0}}万元
						</view>
					</view>
					<view class="yewubox">
						<image src="/static/homeNav/daikaun.png" mode=""></image>
						<view class="leiname">
							贷款
						</view>
						<view class="numbox">
							{{dataList['个人贷款']|| 0}}万元
						</view>
					</view>
					<view class="yewubox">
						<image src="/static/homeNav/baoxian.png" mode=""></image>
						<view class="leiname">
							保险
						</view>
						<view class="numbox">
							{{dataList['个人保险']|| 0}}万元
						</view>
					</view>
					<view class="yewubox">
						<image src="/static/homeNav/guijinshu.png" mode=""></image>
						<view class="leiname">
							贵金属
						</view>
						<view class="numbox">
							{{dataList['个人贵金属']|| 0}}万元
						</view>
					</view>
					<view class="yewubox">
						<image src="/static/homeNav/shoudan.png" mode=""></image>
						<view class="leiname">
							收单
						</view>
						<view class="numbox">
							{{dataList['个人收单']|| 0}}万元
						</view>
					</view>

				</view>
			</view>
			<!-- 进度条 -->
			<view class="d-flex a-item-c p-l-r-20 p-b-50">
				<view class="">
					个人客户营销情况：
				</view>
				<u-line-progress :percentage="dataList['个人进度']" height="18" activeColor="#ff0000"></u-line-progress>
			</view>
		</view>
		<view style="height: 200rpx;">

		</view>
		<view class="buttomboxs">
			<view @click="gowdrw" class="butnavbox">
				<image class="navimgs" src="/static/homeNav/wdrw.png" mode=""></image>
				<view class="navtxt">
					我的任务
				</view>
			</view>
			<view @click="goywsb" class="butnavbox">
				<image class="navimgs" src="/static/homeNav/yjsb.png" mode=""></image>
				<view class="navtxt">
					业绩上报
				</view>
			</view>
			<view class="butnavbox" @click="gowdsj">
				<image class="navimgs" src="/static/homeNav/myshuju.png" mode=""></image>
				<view class="navtxt">
					我的数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		selectOpenDoorRed
	} from '@/common/api/renwu.js'
	export default {
		data() {
			return {
				dataList: {}
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			gowdrw() {
				uni.navigateTo({
					url: "/homeNav/wdrw/wdrw"
				})
			},
			goywsb() {
				uni.navigateTo({
					url: "/homeNav/ywsb/ywsb?id=1"
				})
			},
			gowdsj(){
				uni.navigateTo({
					url:'/homeNav/statistics/statistics'
				})
			},
			async getData() {
				try {
					uni.showLoading({
						title: '数据加载中'
					})
					let res = await selectOpenDoorRed()
					this.dataList = res.data

					// 初始化剩余天数并触发首次动画
					const targetDays = this.dataList['是否在阶段范围内'] == '否' ? 0 : Number(this.dataList['本阶段剩余天数'] || 0)
					this.animateCountdown(0, targetDays) // 从0滚动到目标值
				} catch (error) {
					//TODO handle the exception
				}
			},
			// 数字滚动动画：从start逐步变化到target
			animateCountdown(start, target) {
				let current = start
				const step = target > start ? 1 : -1 // 步长（递增/递减）
				const duration = 1000 // 动画总时长（毫秒）
				const frameCount = 30 // 动画帧数（越多越平滑）
				const interval = duration / frameCount // 每帧间隔时间

				const timer = setInterval(() => {
					current += step
					this.days = current
					this.isAnimating = true // 激活动画样式

					// 到达目标值时停止动画
					if ((step > 0 && current >= target) || (step < 0 && current <= target)) {
						clearInterval(timer)
						this.days = target // 确保最终值正确
						// 动画结束后移除动画类（避免样式残留）
						setTimeout(() => {
							this.isAnimating = false
						}, 100)
					}
				}, interval)
			}
		}
	}
</script>

<style scoped lang="scss">
	.buttomboxs {
		width: 100%;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		z-index: 100;
		bottom: 0;
		border-top: 1px solid #f0e9e8;
		padding: 20rpx 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/* iOS 11.2+ 支持 env()，优先级更高 */
		padding-bottom: env(safe-area-inset-bottom);

		.butnavbox {
			width: 33.3%;

			.navimgs {
				width: 40rpx;
				height: 40rpx;
				margin: 0 auto;
				display: block;
				background-color: #ff5733;
				padding: 10rpx;
				border-radius: 15rpx;
			}

			.navtxt {
				text-align: center;
				font-size: 26rpx;
				margin-top: 10rpx;
				padding-bottom: 15rpx;
			}
		}
	}

	.wdxsyj {
		width: 96%;
		margin: 24rpx auto;
		background-color: #ffffff;

		.wdtopboxs {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #f6f6f6;

			.wdleftbox {
				width: 50%;
				display: flex;
				align-items: center;

				.lanboxs {
					width: 8rpx;
					height: 60rpx;
					background-color: #d43030;
				}

				.wdtxtbox {
					margin-left: 20rpx;
				}
			}

			.timeboxs {
				margin-right: 30rpx;

				text {
					color: #a31010;
					font-weight: bold;
					font-size: 36rpx;
					padding: 0 10rpx;
				}
			}
		}

		.yjboxs {
			width: 100%;
			display: flex;
			flex-flow: row;
			justify-content: space-between;
			background-color: #ffffff;
			padding: 40rpx 0 50rpx 0;

			.yjleftboxs {
				width: 26%;
				background-color: #fff7f6;
				border-radius: 20rpx;
				margin-left: 20rpx;
				padding: 20rpx 0 60rpx 0;
				box-shadow:
					3px 2px 4px rgba(0, 0, 0, 0.2),
					/* 右侧+底部（较深） */
					-2px 2px 3px rgba(0, 0, 0, 0.1);
				/* 左侧+底部（较浅） */


				.tubiao {
					width: 60rpx;
					height: 60rpx;
					margin: 30rpx auto;
					display: block;
				}

				.yyxs {
					text-align: center;
					color: #d43030;
					font-size: 26rpx;
					margin-top: 40rpx;
					// font-weight: bold;
				}

				.yxssty {
					text-align: center;
					color: #d43030;
					font-size: 26rpx;
					font-weight: bold;

					text {
						font-size: 38rpx;
					}
				}

				.fgkhs {
					text-align: center;
					margin-top: 60rpx;
				}

				.fgnum {
					text-align: center;
					margin-top: 10rpx;
				}
			}

			.yjrightbox {
				width: 64%;
				margin-right: 20rpx;





				.yewubox {
					width: 100%;
					display: flex;
					align-items: center;
					background-color: #fff7f6;
					margin-top: 20rpx;
					padding: 20rpx 0;
					border-radius: 20rpx;
					box-shadow:
						3px 2px 4px rgba(0, 0, 0, 0.1),
						-2px 2px 3px rgba(0, 0, 0, 0.1);

					image {
						width: 40rpx;
						height: 40rpx;
						margin-left: 24rpx;
					}

					.leiname {
						width: 20%;
						margin-left: 24rpx;
						font-size: 26rpx
					}

					.numbox {
						flex: 1;
						margin: 0 24rpx;
						// margin-left: 140rpx;
						font-size: 26rpx;
						text-align: right;
					}
				}
			}
		}
	}

	.yewubox:first-child {
		margin: 0 !important;
	}

	.timeboxs {
		margin-right: 30rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;

		.countdown-scroll {
			margin: 0 10rpx;
			overflow: hidden; // 隐藏滚动溢出部分
			width: 60rpx; // 固定宽度，避免数字变化导致抖动
			text-align: center;
		}

		.countdown-num {
			color: #a31010;
			font-weight: bold;
			font-size: 36rpx;
			transition: transform 0.1s ease-out; // 平滑过渡
			display: inline-block; // 确保transform生效
		}

		// 动画类：通过transform模拟滚动效果
		.countdown-num.animate {
			animation: scroll 0.1s linear;
		}
	}

	// 定义滚动动画关键帧（上下抖动增强滚动感）
	@keyframes scroll {
		0% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-5px);
		}

		100% {
			transform: translateY(0);
		}
	}
</style>